<template>
  <span class="selector">
    <span v-if="!editable" @click="toggleEditable" title="点击编辑图标">
      <EfIcon v-bind="inputValue" />
    </span>
    <span v-else>
      <ElPopover
        :popper-options="{ placement: 'auto' }"
        ref="wrapperIconRef"
        :visible="visible"
        :width="650"
        popper-class="pure-popper"
        trigger="hover"
      >
        <template #reference>
          <span
            class="h-32px w-40px flex cursor-pointer items-center justify-center icon-toggle"
            @click="toggleVisible"
          >
            <EfIcon v-bind="inputValue" />
          </span>
        </template>

        <el-row>
          <el-col :span="10">
            <span class="popver-content-color">
              <Vue3ColorPicker
                v-model="colorRef"
                :showPickerMode="false"
                :showInputSet="true"
                @update:model-value="handleIconColorChange"
                mode="solid"
                gradient-mode="linear"
                :show-buttons="false"
              />
            </span>
          </el-col>
          <el-col :span="14">
            <span class="popver-content-icon">
              <ElInput v-model="filterValue" class="p-2" clearable placeholder="搜索图标" />
              <ElDivider border-style="dashed" />
              <ElTabs v-model="currentActiveType" @tab-click="handleTabClick">
                <ElTabPane
                  v-for="(pane, index) in tabsList"
                  :key="index"
                  :label="pane.label"
                  :name="pane.name"
                >
                  <ElDivider border-style="dashed" class="tab-divider" />
                  <ElScrollbar height="270px">
                    <ul class="ml-2 flex flex-wrap px-2">
                      <li
                        v-for="(item, key) in pageList"
                        :key="key"
                        :title="item"
                        class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
                        @click="onChangeIcon(item)"
                      >
                        <Icon :icon="currentActiveType + item" />
                      </li>
                    </ul>
                  </ElScrollbar>
                </ElTabPane>
              </ElTabs>
              <ElDivider border-style="dashed" />
              <ElPagination
                :current-page="currentPage"
                :page-size="pageSize"
                :total="iconCount"
                background
                class="h-10 flex items-center justify-center"
                layout="prev, pager, next"
                small
                @current-change="onCurrentChange"
              />
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <div class="icon-picker-preview">
              <EfIcon v-bind="chooseIcon" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="icon-picker-selector">
              <el-button class="el-button el-button--primary" @click="onSelectOk"> 确定</el-button>
              <el-button class="el-button el-button--primary" @click="OnSelectCancel">
                取消
              </el-button>
            </div>
          </el-col>
        </el-row>
      </ElPopover>
    </span>
  </span>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import { IconJson } from '@/components/Icon/src/data'
import { Vue3ColorPicker } from '@cyhnkckali/vue3-color-picker'
import { Icon as EfIcon } from '@/components/Icon'

defineOptions({ name: 'EFIconSelect' })

type ParameterCSSProperties =
  | {
      icon: string
      color: string
      size: string
      hoverColor: string
    }
  | undefined

const defaultIconClass: ParameterCSSProperties = {
  icon: 'ep:baseball',
  color: 'var(--el-color-primary)',
  size: '32px',
  hoverColor: 'var(--el-color-primary-light)'
}

const props = defineProps({
  modelValue: {
    require: false,
    type: Object as () => ParameterCSSProperties
  },
  editable: {
    type: Boolean,
    default: false
  }
})

const visible = ref(false)
const colorRef = ref(
  'radial-gradient(circle at 0% 18%, rgb(178, 37, 91) 11%, rgb(15, 85, 182) 40%, rgb(178, 37, 91) 77%, rgb(15, 85, 182) 100%)'
)
const inputValue = toRef(props, 'modelValue')
const iconList = ref(IconJson)
const iconRef = ref('add-location')
const currentActiveType = ref('ep:')
const copyIconList = cloneDeep(iconList.value)
const chooseIcon = ref(defaultIconClass || {})
const pageSize = ref(96)
const currentPage = ref(1)
const editable = ref(props.editable)

// 搜索条件
const filterValue = ref('')

const tabsList = [
  { label: 'Element Plus', name: 'ep:' },
  { label: 'Font Awesome 4', name: 'fa:' },
  { label: 'Font Awesome 5 Solid', name: 'fa-solid:' }
]

const emit = defineEmits<{
  (e: 'update:modelValue', v: ParameterCSSProperties)
}>()

const pageList = computed(() => {
  const filteredList =
    copyIconList[currentActiveType.value]?.filter((v) => v.includes(filterValue.value)) || []
  const start = (currentPage.value - 1) * pageSize.value
  return filteredList.slice(start, start + pageSize.value)
})

const iconCount = computed(() => {
  return copyIconList[currentActiveType.value]?.length || 0
})

function handleTabClick({ props }) {
  currentPage.value = 1
  currentActiveType.value = props.name
  iconRef.value = iconList.value[currentActiveType.value]?.[0] || ''
}

const handleIconColorChange = () => {
  chooseIcon.value.icon = currentActiveType.value + iconRef.value
  chooseIcon.value.color = colorRef.value
}

function onChangeIcon(item) {
  iconRef.value = item
  handleIconColorChange()
}

function onCurrentChange(page) {
  currentPage.value = page
}

watch(
  () => filterValue.value,
  () => {
    currentPage.value = 1
  }
)

const toggleVisible = () => {
  visible.value = !visible.value
}
const toggleEditable = () => {
  debugger
  editable.value = !editable.value
  visible.value = true
}

const onSelectOk = () => {
  emit('update:modelValue', { ...chooseIcon.value })
  visible.value = false
}

onMounted(() => {
  if (!props.modelValue) {
    //设置一个默认值
    inputValue.value = chooseIcon.value
    emit('update:modelValue', { ...chooseIcon.value })
  }
})

const OnSelectCancel = () => {
  visible.value = false
}
</script>

<style>
.ck-cp-container {
  box-shadow: none !important;

  .ck-cp-menu {
    display: none !important;
  }
}
</style>

<style lang="scss" scoped>
.popover-content {
  display: flex;
  align-items: center;
}

.color-picker-container {
  margin-right: 10px;
}

.icon-toggle {
  display: inline-flex;
  cursor: pointer;
}

.icon-picker-preview {
  margin: 10px 0;
  padding: 0 12px;
}

.icon-picker-selector {
  margin-top: 10px;
  padding: 0;

  .el-button {
    cursor: pointer;
  }
}

.popver-content-icon {
  position: relative;
  width: 350px;
}

.popver-content-color {
  position: relative;
  width: 300px;
}

.el-divider--horizontal {
  margin: 1px auto !important;
}

.tab-divider.el-divider--horizontal {
  margin: 0 !important;
}

.selector-icon {
  cursor: pointer;
}

.icon-item {
  cursor: pointer;

  &:hover {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
    transform: scaleX(1.05);
    transition: all 0.4s;
  }
}

:deep(.el-tabs__nav-next) {
  font-size: 15px;
  line-height: 32px;
  box-shadow: -5px 0 5px -6px #ccc;
}

:deep(.el-tabs__nav-prev) {
  font-size: 15px;
  line-height: 32px;
  box-shadow: 5px 0 5px -6px #ccc;
}

:deep(.el-input-group__append) {
  padding: 0;
}

:deep(.el-tabs__item) {
  height: 30px;
  font-size: 12px;
  font-weight: normal;
  line-height: 30px;
}

:deep(.el-tabs__header),
:deep(.el-tabs__nav-wrap) {
  position: static;
  margin: 0;
}
</style>
